<template>
    <div>
    <el-card class="control-panel">
      <div slot="header" class="clearfix">
        <span>模拟控制</span>
      </div>
      <!-- 新增绘图控制 -->
      <div class="draw-controls">
        <el-button-group>
          <el-button 
            type="primary" 
            size="mini"
            plain
            @click="startDrawing('Polygon')"
            :disabled="models.isDrawing"
          >绘制灾区</el-button>
          <!-- <el-button 
            type="primary" 
            size="mini"
            plain
            @click="startDrawing('LineString')"
            :disabled="models.isDrawing"
          >绘制河流</el-button> -->
          <el-button 
            type="danger" 
            size="mini"
            plain
            @click="clearDrawing"
            :disabled="!models.isDrawing"
          >结束绘制</el-button>
        </el-button-group>
      </div>

      <!-- 原有控制项 -->
      <!-- <div class="control-item">
        <span class="label">水位高度（米）</span>
        <el-slider
          v-model="models.waterLevel"
          :min="0"
          :max="50"
          :step="0.5"
          @change="updateFloodArea"
        ></el-slider>
      </div> -->
      <div class="control-item">
        <span class="label">附近搜索(公里)</span>
        <el-slider
          v-model="models.radiusKm"
          :min="0"
          :max="50"
          :step="0.5"
          @change="updateRadiusKm"
        ></el-slider>
      </div>

      <div class="control-item">
        <span class="label">覆盖面积 {{models.area}}m</span>
       
      </div>
      <el-button type="primary" @click="simulate" plain size="small">开始分析</el-button>
      <el-button @click="reset" plain size="small">重置</el-button>
    </el-card>

    </div>
</template>

<script lang="ts">
import { Component, Vue ,Emit,Prop} from 'vue-property-decorator';

@Component({})
export default class FloodCard extends Vue {
    @Prop() models:any;


    @Emit('startDrawing')
    startDrawing(type){
        this.models.isDrawing = true;
        this.$message.success("开始绘制洪水模型");
        return type;
    }

    @Emit('clearDrawing')
    clearDrawing(){
        this.models.isDrawing = false;
        this.$message.success("停止绘制洪水模型");
    }

    @Emit('updateFloodArea')
    updateFloodArea(){
        this.$message.success("洪水水位更新");
    }

    @Emit('simulate')
    simulate(){
        this.$message.success("洪水开始分析");
    }
    @Emit('updateRadiusKm')
    updateRadiusKm(){
      this.$message.success("搜索范围变更");
    }

    @Emit('reset')
    reset(){
        this.$message.success("洪水水位充值");
        this.models.waterLevel= 0;
    }
}

</script>

<style lang="scss" scoped>
.draw-controls {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

flood-container {
  position: relative;
  height: 100vh;
}

.map-container {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  z-index: 1000;
}

.control-item {
  margin-bottom: 15px;
}

.label {
  display: block;
  margin-bottom: 5px;
}
</style>